<template>
  <a-modal
    :title="title"
    :width="800"
    :visible="visible"
    :maskClosable="false"
    :destroyOnClose="true"
    @cancel="handleCancel"
  >

    <template>
      <a-form>
        <a-form-item label="诉求描述" :labelCol="labelCol" :wrapperCol="{span: 18}">
          <span>{{record.intro}}</span>
        </a-form-item>
        <a-form-item label="诉求地址" :labelCol="labelCol" :wrapperCol="{span: 18}">
          <span>{{record.address}}</span>
        </a-form-item>

        <a-form-item label="详细地址" :labelCol="labelCol" :wrapperCol="{span: 18}">
          <span>{{record.detail_address}}</span>
        </a-form-item>

        <a-form-item label="凭证" :labelCol="labelCol" :wrapperCol="{span: 18}">
          <a-row type="flex">
            <a-col :span="6" v-for="item in record.images">
              <a :href="item.external_url" target="_blank">
                 <img :src="item.external_url" style="width: 100%;height: 200px;">
              </a>
            </a-col>
          </a-row>
        </a-form-item>
      </a-form>

    </template>

  </a-modal>
</template>

<script>

export default {

  data() {
    return {
      // 对话框标题
      title: '详情',
      // 标签布局属性
      labelCol: {
        span: 4,
      },
      // 输入框布局属性
      wrapperCol: {
        span: 13,
      },
      // modal(对话框)是否可见
      visible: false,
      // modal(对话框)确定按钮 loading
      confirmLoading: false,
      record: {}

    }
  },

  methods: {
    /**
     * 显示对话框
     */
    show(item) {
      // 显示窗口
      this.visible = true
      this.record = item
      console.log(item)
    },
    /**
     * 关闭对话框事件
     */
    handleCancel() {
      this.visible = false

    },
  },
}
</script>
<style scoped>
.ant-input-number {
  width: 200px !important;
}
</style>